<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>客服人员管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		.icon-remove-sign:hover{
			cursor: pointer;
			color: red;
		}
	</style>
	<script src="${ctxStatic}/layer/layer.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});

			function page(n,s){
				if(n) $("#pageNo").val(n);
				if(s) $("#pageSize").val(s);
				return false;
			}
			function loadUserList(){
				var pageNo=$("#pageNo").val();
				var pageSize=$("#pageSize").val();
				var param={};
				param["pageNo"]=pageNo;
				param["pageSize"]=pageSize;
				//加载用户数据
				$("#user_list").load("${ctx}/sys/loan/loan/load/userList",param,function () {

				});
			}
			loadUserList();
			$("body").on("click",".icon-remove-sign",function(){
				var userId=$(this).closest("li").data("id");
				$(this).closest("li").remove();
				if($("#"+userId)&&$("#"+userId).length>0){
					$("#"+userId).remove();
				};
			})
		});
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/sys/loan/loan">贷款列表</a></li>
		<li class="active"><a href="#">客服人员管理</a></li>
	</ul><br/>
		<sys:message content="${message}"/>		
			<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
			<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
			<div style="overflow: hidden">
				<div style="float: left;width:500px">
					<h1>系统用户列表：</h1>
					<div id="user_list" style="min-height: 400px;line-height:400px;width: 500px; border: 1px solid beige ">

					</div>
				</div>

				<div style="float: left;width: 300px" >
					<h1>【${loan.name}】产品的客服人员：</h1>
					<div style="min-height: 500px;line-height:500px;width: 300px; border: 1px solid beige ">
						<c:choose>
							<c:when test="${empty loanManagers}">
								<ul id="manager_list" style="margin: 10px">
									<li id="no_data_flag">暂无客服人员</li>
								</ul></c:when>
							<c:otherwise>
								<ul id="manager_list" style="margin: 10px">
								<c:forEach items="${loanManagers}" var="item">
									<li data-id="${item.user.id}">${item.user.name}(${item.user.office.name}) <i   class='icon-remove-sign'></i></li>
								</c:forEach>
								</ul>
							</c:otherwise>
						</c:choose>

					</div>
				</div>

			</div>
	<form:form id="inputForm" modelAttribute="loan" action="${ctx}/sys/loan/loan/saveManagers" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<c:forEach items="${loanManagers}" var="item">
			<input type="hidden" name="managers" id="${item.user.id}" value="${item.user.id}" >
		</c:forEach>
			<div class="form-actions" style="width: 400px">
				<shiro:hasPermission name="sys:loan:loan:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
				<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
			</div>
		</form:form>
</body>
</html>